<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>使用JSONP的模式去获取腾讯天气接口</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/template-web.js"></script>
    <script src="js/ajax.js"></script>
    <style type="text/css">
        .container {
            padding-top: 60px;
        }
    </style>
</head>

<body>
    <div class="container">
        <table class="table table-striped table-hover" align="center" id="box"></table>
    </div>

    <script type="text/html" id="tpl1">
        <tr>
            <th>时间</th>
            <th>温度</th>
            <th>天气</th>
            <th>风向</th>
        </tr>
        {{each infos}}
        <tr>
            <td>{{dateFormat($value.update_time)}}</td>
            <td>{{$value.degree}}</td>
            <td>{{$value.weather}}</td>
            <td>{{$value.wind_direction}}</td>
        </tr>
        {{/each}}
    </script>

    <script>

        /* 
                指定自己想要的时间格式
            */
            function dateFormat(date) {
                const year = date.substr(0, 4);
                const month = date.substr(4, 2);
                const day = date.substr(6, 2);
                const hour = date.substr(8, 2);
                const minute = date.substr(10, 2);
                const seconds = date.substr(12, 2);
                return year + '年' + month + '月' + day + '日' + hour + '时' + minute + '分' + seconds + '秒';
            }

            //在模板中引入外部函数
            /* 
                将返回的数据 update_time(20231208190000)  都经过dateFormat函数进行处理
                将dateFormat函数导入模板中
            */
           template.defaults.imports.dateFormat = dateFormat

        //获取数据
        /* 
        https://wis.qq.com/weather/common?source=pc&weather_type=forecast_1h&province=湖北省city=武汉市
        */
        const tableObj = document.querySelector("#box")
        jsonp({
            funcname:"func11",
            url:'https://wis.qq.com/weather/common',
            data:{
                source:'pc',
                weather_type:'forecast_1h|forecast_24h',
                province:'黑龙江省',
                city:'哈尔滨市',
            },
            success:function(data){
                console.log(data.data.forecast_1h)
                if(data.status==200){
                    //渲染数据
                    const trs = template('tpl1',{infos:data.data.forecast_1h})
                    console.log(trs)
                    tableObj.innerHTML = trs;
                    

                }
            }
        })


    </script>

</body>

</html>